function Details(options) {
    options = options || {}
    this.box = options.box || document.querySelector("#box")
    this.show = options.show || this.box.querySelector(".show")
    this.showInfo = {
        width: parseFloat(css(this.show, "width")),
        height: parseFloat(css(this.show, "height"))
    }
    this.mask = options.mask || this.show.querySelector(".mask")
    this.maskInfo = {
        width: parseFloat(css(this.mask, "width")),
        height: parseFloat(css(this.mask, "height"))
    }
    this.bigBox = options.bigBox || this.box.querySelector(".bigBox")
    this.bigBoxInfo = {
        width: parseFloat(css(this.bigBox, "width")),
        height: parseFloat(css(this.bigBox, "height"))
    }
    this.bigImg = options.bigImg || this.bigBox.querySelector("img")
    this.bigImgInfo = {
        width: parseFloat(css(this.bigImg, "width")),
        height: parseFloat(css(this.bigImg, "height"))
    }
    this.price = 998
    this.count = 1
    this.totalPrice = 998
    this.priceEle = document.querySelector(".price").lastElementChild
    this.countEle = document.querySelector(".count").children[0]
    this.totalEle = document.querySelector(".total").lastElementChild
    this.init()
}
Details.prototype.init = function () {
    // 让价格 和 数量  显示到页面 
    this.priceEle.innerText = this.price
    console.log(this.countEle)
    this.countEle.value = this.count
    this.totalEle.innerText = this.totalPrice
    this.magnifier()
    this.clickEvent()
    this.computed()
    this.addToCar()
}
Details.prototype.magnifier = function () {
    this.resetBigBox()
    this.enterOut()
    this.move()
}
Details.prototype.resetBigBox = function () {
    // 重置大盒子大小
    /* 
        mask 大小   大盒子大小
        ------   = ---------
        show 大小  大图大小
    
    */
    let _width = this.maskInfo.width * this.bigImgInfo.width / this.showInfo.width
    let _height = this.maskInfo.height * this.bigImgInfo.height / this.showInfo.height
    css(this.bigBox, "width", _width + "px")
    css(this.bigBox, "height", _height + "px")

    // 更新 bigBoxInfo  里面的数据
    this.bigBoxInfo = { width: _width, height: _height }
}
Details.prototype.enterOut = function () {
    on(this.show, 'mouseenter', (e) => {
        css(this.mask, "display", "block")
        css(this.bigBox, "display", "block")
    })
    on(this.show, 'mouseleave', (e) => {
        css(this.mask, "display", "none")
        css(this.bigBox, "display", "none")
    })
}
Details.prototype.move = function () {
    on(this.show, 'mousemove', (e) => {
        let _left = e.pageX - this.box.offsetLeft - this.maskInfo.width / 2
        let _top = e.pageY - this.box.offsetTop - this.maskInfo.height / 2
        if (_left <= 0) {
            _left = 0
        } else if (_left >= this.showInfo.width - this.maskInfo.width) {
            _left = this.showInfo.width - this.maskInfo.width
        }
        if (_top <= 0) {
            _top = 0
        } else if (_top >= this.showInfo.height - this.maskInfo.height) {
            _top = this.showInfo.height - this.maskInfo.height
        }
        css(this.mask, "left", _left + "px")
        css(this.mask, "top", _top + "px")


        /* 
            mask 移动的距离             大图移动的距离
            --------------      =       --------------
            mask 可移动的最大距离       大图可移动的最大距离
        */
        let _x = _left * (this.bigImgInfo.width - this.bigBoxInfo.width) / (this.showInfo.width - this.maskInfo.width)
        let _y = _top * (this.bigImgInfo.height - this.bigBoxInfo.height) / (this.showInfo.height - this.maskInfo.height)
        css(this.bigImg, "left", -_x + "px")
        css(this.bigImg, "top", -_y + "px")
    })
}

//小图的点击切换事件 
Details.prototype.clickEvent = function () {
    let ul = document.querySelector("ul")
    let lis = ul.querySelectorAll("li")
    // console.log(ul);
    on(ul, 'click', (e) => {
        // 通过  e.target.nodeName  判断 点击的是不是 li 
        if (e.target.nodeName === 'IMG') {
            // console.log(e.target)
            // 1、首先应该改变 li 的边框颜色  但是在这个地方  e.target 指向的是 img  所以要想办法拿到  Img 的父元素(parentNode)

            let li = e.target.parentNode
            // console.log(li)
            // 设置当前的 li 改变边框颜色之前  先把 其他所有的 边框颜色改成白色
            for (let i = 0; i < lis.length; i++) {
                css(lis[i], "borderColor", "#fff")
            }
            css(li, "borderColor", "red")
            // 2、拿到当前的（li）索引   0 1 2 3
            let index = Array.from(lis).indexOf(li)
            // 3、设置 show 和 bigBox 盒子里面的图片 
            let showImg = this.show.firstElementChild
            // console.log(this.show.firstElementChild)
            showImg.setAttribute("src", `./img/show_${index + 1}.jpg`)
            this.bigImg.setAttribute("src", `./img/big_${index + 1}.jpg`)
        }
    })
}


// 点击 +-按钮 数量总价 
Details.prototype.computed = function () {
    let reduce = document.querySelector(".reduce")
    let add = document.querySelector(".add")

    on(reduce, 'click', () => {
        // 改变  this 指向
        // changeCount("reduce")
        changeCount.call(this, "reduce")
    })
    on(add, 'click', () => {
        // // 数量 +1 
        // this.count++
        // if(this.count >= 5){
        //     alert("还受得了不")
        // }
        // this.totalPrice = this.count * this.price

        // this.countEle.value = this.count
        // this.totalEle.innerText = this.totalPrice
        changeCount.call(this, "add")
    })
}
Details.prototype.addToCar = function () {
    let loadingEle = document.querySelector(".loading")
    let btn = document.querySelector("a")
    on(btn, 'click', (e) => {
        // 阻止默认事件 
        e.preventDefault()
        fadeIn(loadingEle, 500,function(){
            setTimeout(function(){
                fadeOut(loadingEle, 500)
            },1000)
        })

    })
}


function changeCount(str) {
    if (str === "reduce") {
        this.count--
    } else {
        this.count++
    }

    if (this.count >= 5) {
        alert("还受得了不")
    }
    if (this.count <= 1) {
        this.count = 1
    }
    this.totalPrice = this.count * this.price

    this.countEle.value = this.count
    this.totalEle.innerText = this.totalPrice

}